<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>翻牌游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            height: 650px;
            margin: 20px auto;
            position: relative;
        }

        .box h2 {
            text-align: center;
        }

        .box .smallbox {
            width: auto;
            height: 600px;
            background-color: #dddddd;
            margin-top: 20px;
        }

        .box .smallbox .img_list>li {
            background-color: #f0f0f0;
            float: left;
            margin: 2px;
            overflow: hidden;
            position: relative;
            width: auto;
            height: auto;

        }

        .box .smallbox .img_list>li img {
            transform: rotateY(180deg);
            backface-visibility: hidden;
        }

        .box .smallbox .img_list .li0 {
            float: left;
            margin: 2px;
            width: 596px;
            height: 596px;
            text-align: center;
            line-height: 596px;
            font-size: 100px;
            color: black;
        }

        .box .smallbox .img_list .li4 {
            width: 296px;
            height: 296px;
        }

        .box .smallbox .img_list>li .img4 {
            margin-top: -16px;
            margin-left: 26px;
            width: calc(120px*2);
            height: 320px;
        }

        .box .smallbox .img_list .li16 {
            width: 146px;
            height: 146px;
        }

        .box .smallbox .img_list>li .img16 {
            margin-top: -8px;
            margin-left: 13px;
            width: auto;
            height: auto;
        }

        .box .smallbox .img_list .li36 {
            width: 96px;
            height: 96px;
        }

        .box .smallbox .img_list>li .img36 {
            margin-top: calc(-8px/1.5);
            margin-left: calc(13px/1.5);
            width: calc(120px/1.5);
            height: calc(160px/1.5);
        }

        .selector {
            position: fixed;
            width: 190px;
            height: 195px;
            right: 0px;
            bottom: 0px;
            font-size: 14px;
        }

        .selector p,
        .selector select,
        .selector button {
            margin-top: 15px;
        }

        .selector select {
            width: 160px;
            height: 30px;
            outline: none;
        }

        .selector button {
            width: 160px;
            height: 35px;
            background-color: #2b84d0;
            border: 1px solid #2b84d0;
            border-radius: 4px;
            outline: none;
            color: white;
        }

        .shuoming {
            position: fixed;
            width: 163px;
            height: 122px;
            bottom: 45px;
            left: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>js记忆翻牌小游戏</h2>
        <div class="smallbox">
            <ul class="img_list">
                <li class="li36"><img class="img36" src="images/1.png" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="selector">
        <p>你已经进行了：<span style="color: red;">0步</span></p>
        <p>游戏进度：<span style="color: red;">0/N</span></p>
        <select>
            <option value="0" selected>&nbsp--选择难度--</option>
            <option value="4">&nbsp难度1：2x2</option>
            <option value="16">&nbsp难度2：4x4</option>
            <option value="36">&nbsp难度3：6x6</option>
        </select><br>
        <button>新游戏</button>
    </div>
    <div class="shuoming">
        <p>游戏规则：翻开两个格子，如果图案一致则配对，将其挑出，如果图案不一致则盖回去，直到所有格子都配对完成，游戏结束。</p>
    </div>
    <script>
        var imgSrc = [
            "images/1.png",
            "images/2.png",
            "images/3.png",
            "images/4.png",
            "images/5.png",
            "images/6.png",
            "images/7.png",
            "images/8.png",
            "images/9.png",
            "images/10.png",
            "images/11.png",
            "images/12.png",
            "images/13.png",
            "images/14.png",
            "images/15.png",
            "images/16.png",
            "images/17.png",
            "images/18.png",
            "images/19.png",
            "images/20.png"
        ];
        var img_list = document.querySelector(".box .img_list");
        var btn = document.querySelector(".selector button");
        var p = document.querySelectorAll(".selector p");
        var step = p[0].querySelector("span");
        var complete = p[1].querySelector("span");
        var timer = 0;
        btn.onclick = function () {
            timer = new Date().getTime();
            console.log(timer);
            var select = document.querySelector(".selector select");
            var imgAddressArr = getImgSrc(select.value);
            complete.innerText = "0/" + select.value / 2;
            img_list.innerHTML = "";
            for (var i = 0; i < select.value; i++) {
                var li = document.createElement("li");
                li.setAttribute("class", "li" + select.value + " address" + imgAddressArr[i] + " number" + i);
                var img = document.createElement("img");
                img.setAttribute("class", "img" + select.value);
                img.src = imgSrc[imgAddressArr[i]];
                li.appendChild(img);
                img_list.appendChild(li);
            };
            if (select.value == 0) {
                var li = document.createElement("li");
                li.innerText = "请选择难度";
                li.setAttribute("class", "li" + select.value);
                img_list.appendChild(li);
            };
            binding();
        };
        Array.prototype.indexOf = function (val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == val) return i;
            }
            return -1;
        };
        Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        function getImgSrc(num) {
            var addressList = [];
            var newArr = [];
            for (var n = 0; n < num / 2; n++) {
                var address = getRandom();
                addressList.push(address, address);
            };
            var newLength = addressList.length;
            for (var g = 0; g < newLength; g++) {
                var nums = Math.floor(Math.random() * addressList.length);
                newArr.push(addressList[nums]);
                addressList.remove(addressList[nums]);
            };
            function getRandom() {
                var rand = Math.floor(Math.random() * 20);;
                for (var i = 0; i < addressList.length; i++) {
                    if (addressList[i] == rand) {
                        return getRandom();
                    }
                }
                return rand;
            };
            return newArr;
        };
        var nowOpen = 0;
        var stepNumber = 0;
        var nowAdd = [];
        var finded = [];
        function binding() {
            finded = [];
            nowOpen = 0;
            stepNumber = 0;
            step.innerText = stepNumber + "步";
            var img_list_li = img_list.querySelectorAll("li");
            for (let i = 0; i < img_list_li.length; i++) {
                img_list_li[i].onclick = function () {
                    var that = this;
                    if (this.open == false) {
                        stepNumber++;
                        p = document.querySelectorAll(".selector p");
                        step = p[0].querySelector("span");
                        step.innerText = stepNumber + "步";
                        var img_list_li_img = this.querySelector("img");
                        rotating(img_list_li_img, 180, 360);
                        nowOpen++;
                        this.open = true;
                        if (nowAdd[1] == this.classList[1] && nowAdd[2] != this.classList[2] && nowOpen == 2) {
                            for (let q = 0; q < img_list_li.length; q++) {
                                if (img_list_li[q].open == true) {
                                    img_list_li[q].open == false;
                                    img_list_li[q].style.backgroundColor = "#a5adb4";
                                    if (!finded.includes(img_list_li[q])) {
                                        finded.push(img_list_li[q]);
                                    }
                                };
                            };
                            console.log(finded);
                            complete.innerText = finded.length / 2 + "/" + img_list_li.length / 2;
                            nowOpen = 0;
                            nowAdd = [];
                            jug(finded.length / 2, img_list_li.length / 2, timer, stepNumber);
                            return;
                        } else if (nowAdd[1] !== this.classList[1] && nowAdd[2] != this.classList[2]) {
                            nowAdd = this.classList;
                        }
                        if (nowOpen == 2) {
                            for (let j = 0; j < img_list_li.length; j++) {
                                let img_list_li_img1 = img_list_li[j].querySelector("img");
                                if (img_list_li[j].open == true && !finded.includes(img_list_li[j])) {
                                    img_list_li[j].rotatingBack = setTimeout(function () {
                                        rotating(img_list_li_img1, 360, 180);
                                        img_list_li[j].open = false;
                                        nowOpen--;
                                    }, 1000);
                                    nowAdd = [];
                                };
                            };
                        };
                        if (nowOpen == 3) {
                            for (let p = 0; p < img_list_li.length; p++) {
                                let img_list_li_img2 = img_list_li[p].querySelector("img");
                                if (i == p) {
                                    continue;
                                };
                                if (img_list_li[p].open == true && !finded.includes(img_list_li[p])) {
                                    clearTimeout(img_list_li[p].rotatingBack);
                                    rotating(img_list_li_img2, 360, 180);
                                    img_list_li[p].open = false;
                                    nowOpen--;
                                };
                            };
                        }
                    };
                };
                img_list_li[i].open = false;
            };
        };
        function rotating(obj, from, to) {
            clearInterval(obj.intervalID);
            var Y = from;
            obj.intervalID = setInterval(function () {
                var speed = (to - Y) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                Y += speed;
                obj.style.transform = "rotateY(" + Y + "deg)";
                if (Y == 360) {
                    clearInterval(obj.intervalID);
                } if (Y == 180) {
                    clearInterval(obj.intervalID);
                }
            }, 15);
        };
        function jug(a, b, t, endStep) {
            if (a == b) {
                finded = [];
                nowOpen = 0;
                var endTime = new Date().getTime();
                var spendTime = (endTime - t) / 1000;
                setTimeout(function () { alert("你真是个大聪明！！ 花费时间：" + spendTime + "秒;  步数：" + endStep) }, 500);
            }
        };
        window.onload = btn.click();
    </script>
</body>

</html>